<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>事务管理</title>
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script>
        /**
         * 导出接口数据的样例
         * @return {[type]} [description]
         */
        function exportApiDemo(url) {
            layui.use(['jquery', 'excel', 'layer'], function () {
                var $ = layui.jquery
                var layer = layui.layer
                var excel = layui.excel
                // 模拟从后端接口读取需要导出的数据
                $.ajax({
                    url: url
                    , dataType: 'json'
                    , success: function (res) {
                        var data = res
                        data = excel.filterExportData(data, {
                            id: 'id'
                            , logname: 'logname'
                            , uid: 'uid'
                            , tips: 'tips'
                            ,createTime:'createTime'
                        })
                        // 重点2！！！一般都需要加一个表头，表头的键名顺序需要与最终导出的数据一致
                        data.unshift({
                            id: "ID",
                            logname: "活动名",
                            uid: '学号',
                            tips: '所属社团',
                            createTime:'创建时间'
                        })
                        var timestart = Date.now()
                        excel.exportExcel({
                            sheet1: data
                        }, '导出接口数据.xlsx', 'xlsx')
                        var timeend = Date.now()
                        var spent = (timeend - timestart) / 1000
                        layer.alert('单纯导出耗时 ' + spent + ' s')
                    }
                    , error: function () {
                        layer.alert('获取数据失败，请检查是否部署在本地服务器环境下')
                    }
                });
            })
        };
    </script>
</head>
<body>
<div class="layui-row">
    <form class="layui-form layui-col-md12 we-search" style="margin-top: 10px" lay-filter="search">

        <div class="layui-form-item">
            <div class="layui-form-label">事务搜索</div>
        <div class="layui-inline">
            <input type="text" id="name" name="name" placeholder="请输入关键字" autocomplete="off" class="layui-input">
        </div>
            <div class="layui-inline">
            <button class="layui-btn"  lay-filter="search" lay-submit=""><i class="layui-icon">&#xe615;</i></button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-label">导出数据</div>
            <div class="layui-form-block">
                <button type="button" class="layui-btn layui-btn-primary" onclick="exportApiDemo('/api/organ/affair/exportActivity')">导出活动报名</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="exportApiDemo('/api/organ/affair/exportOrgan')">导出社团报名</button>
            </div>
        </div>
    </form>
</div>

<table id="log" lay-filter="test"></table>
<!-- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit" >编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="../../layui/layui.js"></script>
<script>
    layui.use(['table','form','jquery'],function(){
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        //第一个实例
        table.render({
            elem: '#log'
            ,id:"test"
            ,height: 'full'
            ,url: '/api/organ/affair/getOrganAffairList' //数据接口
            ,page: true //开启分页
            ,parseData: function(res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.data//解析数据列表
                };
            }
            ,request: {
                pageName: 'current' //页码的参数名称，默认：page
                ,limitName: 'size' //每页数据量的参数名，默认：limit
            }
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'oid', title: '社团ID', align:'center',width:200}
                ,{field:'uid',title:'学号',align:'center', width:200}
                ,{field: 'logname', title: '事务名',align:'center', width:200, sort: true}
                ,{field: 'createTime', title: '时间',align:'center', width:180}
                ,{field: 'tips', title: '社团名', align:'center',width: 177}
            ]]
        });
        form.on('submit(search)', function(data){
            alert(1);
            var f = data.field;
            table.render({
                elem: '#log'
                ,id:"test"
                ,height: 'full'
                ,url: '/api/organ/affair/getOrganAffairListByName?oid=0&name='+f.name //数据接口
                ,page: true //开启分页
                ,request: {
                    pageName: 'current' //页码的参数名称，默认：page
                    ,limitName: 'size' //每页数据量的参数名，默认：limit
                }
                ,parseData: function(res) { //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data//解析数据列表
                    };
                }
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'oid', title: '社团ID', align:'center',width:200}
                    ,{field:'uid',title:'学号',align:'center', width:200}
                    ,{field: 'logname', title: '事务名',align:'center', width:200, sort: true}
                    ,{field: 'createTime', title: '时间',align:'center', width:180}
                    ,{field: 'tips', title: '社团名', align:'center',width: 177}
                ]]
            });
            return false;
        });
    // svar temp = table.checkStatus('test');
    // alert(temp.data);
    });
</script>
</body>
</html>